import React, { Component, PropTypes } from 'react';
import { Row, Col, Card, Steps, Icon, List, Avatar, Input, Button,Tag,Upload,Modal } from 'antd'
import "./detail.scss"
const Step = Steps.Step;
const { TextArea } = Input;
const data = [
    {
        avatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526647099998&di=de797d0dd610c67373647c916d3e1e4f&imgtype=0&src=http%3A%2F%2Fk2.jsqq.net%2Fuploads%2Fallimg%2F1701%2F10_170120141806_3.jpg",
        title: '章云峰完成了磐晟资产-开基本户的工作,备注终于搞定了',
        description: '2分钟前',
    },
    {
        avatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526647161979&di=a213c63c11cbf407e1f7c0208570d118&imgtype=0&src=http%3A%2F%2Fimg1.2345.com%2Fduoteimg%2FqqTxImg%2F2013%2F12%2Fwm%2F26-010722_183.jpg",
        title: '朱老师成了磐晟资产-开基本户的工作,备注终于搞定了',
        description: '2分钟前',
    },
];
export default class ProjectDetail extends Component {
    constructor() {
        super()
    }

    componentDidMount() {
 
    }

   handelTagClose(){

   }

    render() {
        return (
            <div style={{ background: 'rgba(240,242,245,1)'}}>
                <Card title="项目进度">
                    <Steps progressDot current={1}>
                        <Step title="创建项目" description={<div className="setpDiv"><div>曲丽丽<Icon style={{ marginLeft: 5 }} type="check-circle" /></div><div>2016-12-12</div></div>} />
                        <Step title="尽职调研" description={<div className="setpDiv"><div>周毛毛<Icon style={{ marginLeft: 5 }} type="check-circle-o" /></div><div style={{ color: 'rgba(24,144,255,1)' }}>催一下</div></div>} />
             
                    </Steps>
                </Card>
                <Card title="主体信息" style={{ marginTop: 20, fontSize: 14, lineHeight: 2 }}>
                    <Row>
                        <Col span={8}>
                            <p><b>项目编号:</b></p>
                            <p><b>项目名称:</b></p>
                            <p><b>项目简称:</b></p>

                        </Col>
                        <Col span={10}>
                            <p><b>项目分类:</b></p>
                            <p><b>资产分类:</b>北京市朝阳区建国门外大街甲6号1幢11层C座十二层1206室</p>
                            <p><b>一句话介绍:</b>北京市朝阳区建国门外大街甲6号1幢11层C座十二层1206室</p>
                        </Col>
                        <Col span={6}>
                            <p><b>开始时间:</b></p>
                            <p><b>结束时间:</b></p>
                            <p><b>描述:</b></p>
                        </Col>
                    </Row>

                    <Row style={{ marginTop: 30 }}>
                      
                      <span style={{marginRight:10}}>标签:</span>
    <Tag closable onClose={this.handelTagClose}>高风险</Tag>
    <Tag closable onClose={this.handelTagClose}>高净值</Tag>
    <Tag>添加标签</Tag>
                    </Row>
            <Row style={{marginTop:20}}>
           <b style={{marginRight:5}}>商标</b> <PicturesWall />
                </Row>
                   
                </Card>
                <Card　style={{ marginTop: 20}} title="投资信息" extra={<a href="#">编辑</a>}>
                    <p></p>
                </Card>
                
                <Card　style={{ marginTop: 20}} title="尽调报告" extra={<a href="#">编辑</a>}>
                    <p></p>
                </Card>

                <Card style={{ marginTop: 20}} extra={<a href="#">+新增</a>}>
                    <p></p>
                </Card>

                <Card style={{ marginTop: 20}} extra={<a href="#">+新增</a>}>
                    <p></p>
                </Card>
                
                
                

                <Card title="主体动态" style={{ marginTop: 20 }}>
                    <List
                        itemLayout="horizontal"
                        dataSource={data}
                        renderItem={item => (
                            <List.Item>
                                <List.Item.Meta
                                    avatar={<Avatar src={item.avatar} />}
                                    title={<a href="https://ant.design">{item.title}</a>}
                                    description={item.description} />
                            </List.Item>
                        )} />
                    <Row>
                        <Row style={{marginTop: 0}}>
                            <Col xxl={2} xl={3}>
                                <Avatar src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526647161979&di=a213c63c11cbf407e1f7c0208570d118&imgtype=0&src=http%3A%2F%2Fimg1.2345.com%2Fduoteimg%2FqqTxImg%2F2013%2F12%2Fwm%2F26-010722_183.jpg" />
                                <span style={{marginLeft:18}}>章云峰</span>
                        </Col>
                            <Col xxl={22} xl={21}>
                                <TextArea rows={3} placeholder='请输入你的评论信息' />
                            </Col>
                        </Row>
                        <Row type="flex" style={{marginTop:10}} >
                            <Col lg={3} push={21} xl={4}>
                                <Button>提交</Button>
                                <Button style={{marginLeft:20}}>清空</Button>
                            </Col>
                        </Row>
                    </Row>

                </Card>
            </div>
        )
    }
}

class PicturesWall extends React.Component {
    state = {
      previewVisible: false,
      previewImage: '',
      fileList: [{
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }],
    };
  
    handleCancel = () => this.setState({ previewVisible: false })
  
    handlePreview = (file) => {
      this.setState({
        previewImage: file.url || file.thumbUrl,
        previewVisible: true,
      });
    }
  
    handleChange = ({ fileList }) => this.setState({ fileList })
  
    render() {
      const { previewVisible, previewImage, fileList } = this.state;
      const uploadButton = (
        <div>
          <Icon type="plus" />
          <div className="ant-upload-text">Upload</div>
        </div>
      );
      return (
        <div className="clearfix">
          <Upload
            action="//jsonplaceholder.typicode.com/posts/"
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
          >
            {fileList.length >= 3 ? null : uploadButton}
          </Upload>
          <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </div>
      );
    }
  }